<template>
  <el-row style="height:80%">
    <el-col :span="24">
      <div class="grid-content bg-purple">
        <el-row>
          <el-col :span="2">
            <div class="box1" style="me">111</div>
          </el-col>
          <el-col :span="2" class="box1">
            <div>2</div>111111
          </el-col>
          <el-col :span="2" class="box1">
            <div style="me">111</div>
          </el-col>
          <el-col :span="2" class="box1">
            <div>2</div>111111
          </el-col>
          <el-col :span="2" class="box1">
            <div style="me">111</div>
          </el-col>
          <el-col :span="2" class="box1">
            <div>2</div>111111
          </el-col>
          <el-col :span="2" class="box1">
            <div style="me">111</div>
          </el-col>
          <el-col :span="2" class="box1">
            <div>2</div>111111
          </el-col>
          <el-col :span="2" class="box1">
            <div style="me">111</div>
          </el-col>
          <el-col :span="2" class="box1">
            <div>2</div>111111
          </el-col>
          <el-col :span="2" class="box1">
            <div style="me">111</div>
          </el-col>
          <el-col :span="2" class="box1">
            <div>2</div>111111
          </el-col>
        </el-row>
      </div>
    </el-col>
  </el-row>
</template>
<script>
export default {
  data() {
    return {
      status1: '',
      status2: '',
      info: this.getList(),
      infos: ['../assets/pic/', '', '']
    }
  },
  created() {
    this.getList()
    setTimeout(() => {
      this.status1 = 'i'
    }, 1000)
    setTimeout(() => {
      this.status2 = 'img'
    }, 1100)
  },
  methods: {
    getList() {
      this.p_l = {
        'img1': 'zhoujian.png',
        'img2': 'jinyue.png',
        'img3': 'limeng.jpg',
        'img4': 'liuwenfan.jpg',
        'img5': 'lizeyang.png',
        'img7': 'xiaoyu.jpg',
        'img8': 'xiaoyu1.jpg',
        'img9': 'xingmeng.jpg',
        'img10': 'xuzishen.jpg',
        'img11': 'yanxia.jpg',
        'img12': 'yanxia1.jpg',
        'img13': 'zhangchen.jpg',
        'img14': 'zhangchen1.jpg',
        'img15': 'zhouwenjie.png',
        'img16': 'hedan.png'
      }
      var phono = []
      for (const i in this.p_l) {
        phono.push(require('../../assets/pic/' + this.p_l[i]))
      }
      return phono
    }
  }
}

</script>
<style scoped>
.ContainerQaPhono {
  width: 80%;
  height: 100%;
  margin: 80px 70px;
  position: relative;
}

.box1 {
  /*width: 10%;*/
  transition: 0.1s;
  height: 80%;
  -moz-transition: 1s;
  -webkit-transition: 1s;
  /*position: absolute;*/
}

/*ico {
  width: 100%;
  padding: 10px 10px 15px 10px;
  border: 1px solid #ddd;

  z-index: 1;
}*/

.box1:hover {
  -webkit-transform: rotate(0deg) !important;
  transform: scale(1.5) !important;
  -webkit-transform: scale(1.5) !important;
  box-shadow: 4px 4px 10px #ccc !important;
  -moz-box-shadow: 4px 4px 10px #ccc !important;
  -webkit-box-shadow: 4px 4px 10px #ccc !important;
  z-index: 1 !important;

}

.el-row {
  margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
}

.el-col {
  height: 120px;
  border-radius: 4px;
}

.bg-purple-dark {
  background: #99a9bf;
}

.bg-purple {
  background: #d3dce6;
}

.bg-purple-light {
  background: #e5e9f2;
}

.grid-content {
  border-radius: 4px;
  min-height: 120px;
}

.grid-content_beckup {
  border-radius: 4px;
  min-height: 36px;
}

.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}

</style>
